<template>

  <el-dialog title="选择标签" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="600px">
    <div class="item-li">
      <el-radio-group v-model="containValue">
        <el-radio :label="item.id" :key="index" v-for="(item,index) in radioList">{{ item.label }}</el-radio>
      </el-radio-group>
      <multipleSelect size="small" v-model="weChatLabelList" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
    </div>
    <div class="exclusion">
      <el-checkbox v-model="excludeChecked"></el-checkbox>
      开启排除条件
    </div>
    <div class="item-li" v-if="excludeChecked">
      <el-radio-group v-model="excludeValue">
        <el-radio :label="item.id" :key="index" v-for="(item,index) in radioList">{{ item.label }}</el-radio>
      </el-radio-group>
      <multipleSelect v-model="personLabelList" size="small" placeholder='企微标签' :receiverNameOpt='lableOpt2'/>
    </div>

    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button>提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'selectLabelPage',
  components: {
    'multipleSelect': () => import('@/views/components/multipleSelect.vue'),//导出弹窗

  },
  data() {
    return {
      excludeChecked: false,//是否开启排除条件
      containValue: 1,
      excludeValue: 1,
      selectedItems: null,
      weChatLabelList: [],//企微标签
      personLabelList:[],//个人标签
      lableOpt: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      lableOpt2: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      radioList: [
        {id: 1, label: "满足任意一个标签"},
        {id: 2, label: "同时满足所有标签"},
        {id: 3, label: "未打标签"},
      ],
      treeData: [
        {
          id: 1,
          label: "水果",
          children: [
            {id: 2, label: "西瓜"},
            {id: 3, label: "香蕉"},
            {id: 4, label: "橙子"},
          ],
        },
        {
          id: 5,
          label: "蔬菜",
          children: [
            {id: 6, label: "西红柿"},
            {id: 7, label: "黄瓜"},
            {id: 8, label: "青菜"},
          ],
        },
        {
          id: 9,
          label: "零食",
          children: [
            {id: 10, label: "薯片"},
            {id: 11, label: "巧克力"},
          ],
        },
      ],
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {
    weChatLabelList: {
      handler(val) {
        console.log('标签',val);
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    getvalue(val){
      console.log('111',val);
      console.log('222',this.personLabelList);
    },
    getSelectedItems() {
      console.log(this.selectedItems);
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: flex-end;
}

.item-li {
  padding: 16px;
  background: #f7f7f7;
  border-radius: 2px;

  .el-radio-group {
    margin-bottom: 10px;
  }
}

::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 600px;
}

.el-checkbox-group {
  margin-top: 20px;

  .el-checkbox {
    margin-bottom: 12px;
    width: 150px;
  }
}

.exclusion {
  margin: 12px 0px;
  padding: 12px 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f0;
}
</style>
